<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/index3.css">
		<link rel="stylesheet" href="css/reset.css">	
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div class="root">
			<!-- 土豆玉米 -->
			<div class="img_one">
				<img src="images/3.png" alt="">
			</div>
			<!-- 农民 -->
			<div class="img_two">
				<img src="images/2.png" alt="">
			</div>
			<!-- 豆子 -->
			<div class="img_three">
				<img src="images/5.png" alt="">
			</div>
			<!-- 介绍 -->
			<div class="img_four">
				<img src="images/6.png" alt="">
				<div class="p_s_2">
					<p>据说：“多吃五谷杂粮</p>
					<p>对身体好！”</p>
					<p>算算你的健康值！</p>
				</div>
			</div>
			<!-- 背景圆 -->
			<div class="img_five">
				<img src="images/p4-1.png" alt="">
			</div>
			<!-- 赶快算算按钮-->
			<div class="img_six" id="img_six">
				<img src="images/8.png" alt="">
				<p class="abp" id="abp">赶快算算</p>
			</div>
			<!-- 音乐 -->
			<div class="img_4">
				<audio style="display:none; height: 0" id="bg-music" preload="auto" src="bgm.mp3" loop="loop"></audio>
				<img src="images/yinyue.gif" alt="">
			</div>
			<!-- 输入姓名框 -->
			<div class="input">
				<input type="tel" id="ipt" placeholder="输入姓名">
			</div>
			<!-- 选择职业框 -->
			<div class="choice" id="choice1">
				选择职业
			</div>
			<!-- 点击出现选项菜单 -->
			<ul class="uls" id="uls">
				<li>上班族</li>
				<li>学生</li>
			</ul>
			<!-- 遮罩 -->
			<div id="shade">
				<p>请输入姓名</p>
			</div>
			<div id="img_p">
				<img src="images/p5-1.png" class="img_name" id="img_na">
				<p>请输入姓名</p>
			</div>
		</div>
		
		<script src="js/cookie.js"></script>
		<script>
			var choice = document.getElementById("choice1");
			var uls = document.getElementById("uls");
			var ipt = document.getElementById("ipt");
			var shade = document.getElementById("shade");
			var img_p = document.getElementById("img_p");
			var img_na = document.getElementById("img_na");
			var abp = document.getElementById("abp");
			//选择职业
			choice.onclick = function(e){
				uls.style.display = "block";
				e.stopPropagation()
			}
			//上班族 学生
			var arr = uls.children;
			for(var i=0;i<arr.length;i++){
				var res = arr[i];
				res.onclick = function(e){
					choice1.innerHTML = this.innerHTML;
					// var sub =document.getElementById("sub");
				uls.style.display = "none";
				e.stopPropagation();
			}
			}
			document.onclick = function(){
				uls.style.display = "none";
				
			}
			// var token = getCookie("token");
			abp.onclick = function(){
				if(ipt.value.length<=0){
					shade.style.display = "block";
					img_p.style.display = "block";
				}else{
					var token = getCookie("token");
					var ipt1 = ipt.value;
					console.log(ipt1);
					if(token){
						console.log("存在");
							
					}else{
						//token 不存在 说明没登录过
						
						if(ipt1){
							//登录成功
							setCookie("token",ipt1,1)
						}else{
							//已经登录
						}
					}
					location.href='index4.html';
				}
			}
			img_na.onclick = function(){
				shade.style.display = "none";
				img_p.style.display = "none";
			}
			
			
			
			
			
		//音乐自动播放
		window.onload=function(){
			autoPlayMusic();
			audioAutoPlay();
		}
		function audioAutoPlay() {
			var audio = document.getElementById('bg-music');
			audio.play();
		}
		// 音乐播放
		function autoPlayMusic() {
			// 自动播放音乐效果，解决浏览器或者APP自动播放问题
			function musicInBrowserHandler() {
				musicPlay(true);
				document.body.removeEventListener('touchstart', musicInBrowserHandler);
			}
			document.body.addEventListener('touchstart', musicInBrowserHandler);
			
		function musicPlay(isPlay) {
			var media = document.querySelector('#bg-music');
			if (isPlay && media.paused) {
				media.play();
			}
			if (!isPlay && !media.paused) {
				media.pause();
			}
		}
		}
		</script>
	</body>
</html>
